<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 2 Password Strength Meter Example</title>
    <link rel="stylesheet" media="screen" href="bootstrap2.css" />
</head>
<body>
    <div class="container" style="margin-left: 20px;">
        <h1>Bootstrap 2 Password Strength Meter Example</h1>
        <form style="margin-bottom: 20px;">
            <fieldset>
                <legend>Please type in your password</legend>
                User: <input type="text" id="username" />
                <div class="control-group">
                    Pass: <input type="password" id="password" />
                </div>
                <div id="messages"></div>
            </fieldset>
        </form>
        <div class="row">
            <div class="span12">
<pre>jQuery(document).ready(function () {
    "use strict";
    var options = {};
    options.common = {
        onLoad: function () {
            $('#messages').text('Start typing password');
        }
    };
    options.ui = {
        bootstrap2: true,
        showErrors: true
    };
    $(':password').pwstrength(options);
});</pre>
            </div>
        </div>
        <p><a href="..">Go back</a></p>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="../pwstrength.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            "use strict";
            var options = {};
            options.common = {
                onLoad: function () {
                    $('#messages').text('Start typing password');
                }
            };
            options.ui = {
                bootstrap2: true,
                showErrors: true
            };
            $(':password').pwstrength(options);
        });
    </script>
</body>
</html>
